<template>
  <el-row style="margin-top: 3em; border: 2px #EEA8A8 solid; border-radius: 15px;">
    <el-col :span="4"></el-col>
    <el-col :span="16" style="text-align: center;">
      <h1>{{ welcomeText.title }}</h1>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
  <el-row style="margin-top: 1em; border: 2px #EEA8A8 solid; border-radius: 15px;">
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <br>
      <div class="welcome-text">{{ welcomeText.paragraph1 }}</div><br>
      <div class="welcome-text">{{ welcomeText.paragraph2 }}</div><br>
      <div class="welcome-text">{{ welcomeText.paragraph3 }}</div><br>
      <div class="welcome-text">{{ welcomeText.paragraph4 }}</div><br>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
  <el-row style="margin-top: 1em; border: 2px #EEA8A8 solid; border-radius: 15px;">
    <el-col :span="4"></el-col>
    <el-col :span="16" style="text-align: center;">
      <h1>{{ welcomeText.tip }}</h1>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
</template>

<script>
export default {
  setup() {
    const welcomeText = {
      title: "Welcome",
      paragraph1: "欢迎来到我们的网站！在这里，我们致力于为您带来最新最热的用户着装搭配盲盒商业资讯和产品推荐。无论您是时尚达人还是新手小白，我们都将为您提供最专业的搭配建议和最有趣的盲盒体验。",
      paragraph2: "在这里，您将有机会发现各种不同风格的搭配灵感，从日常休闲到正式商务，从街头潮流到高级定制，我们将为您呈现多样化的着装选择，让您在不同场合中都能散发自信的魅力。",
      paragraph3: "除了搭配灵感，我们还将为您介绍最新的盲盒产品，让您有机会在每一次开箱时都能收获惊喜和快乐。无论您是收藏爱好者还是追求个性，我们都将为您推荐最适合您的盲盒产品，让您享受到购物的乐趣和惊喜。",
      paragraph4: "我们的目标是成为您在时尚搭配和盲盒购物领域的最佳指南和伙伴，让您在这个充满乐趣和变化的世界中找到属于自己的风格和快乐。感谢您的光临，让我们一起开启时尚之旅，发现更多精彩！",
      tip: "请先在左侧选择商品"
    }

    return {
      welcomeText
    }
  }
}
</script>

<style>
  .welcome-text {
    text-indent: 2em;
    font-size: large;
  }
</style>